import { configureStore } from '@reduxjs/toolkit'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import type { TypedUseSelectorHook } from 'react-redux'
import countSlice from './modules/count'
import homeSlice from '@/views/Home/store'
import createOrderSlice from '@/views/CreateOrder/store'

const store = configureStore({
  reducer: {
    count: countSlice,
    home: homeSlice,
    createOrder: createOrderSlice
  }
})

// 这里的UseSelector一定要重新定义
// 因为state中可能会随时添加数据 每次添加数据又得重新定义类型很麻烦
// 这样做可以让他自己解析出state中数据类型

// getState是一个函数 GetStateFnType获取了函数的类型 但是想要的是里面返回的数据类型
type GetStateFnType = typeof store.getState
// 这一步就可以获取到返回值数据类型
type RootState = ReturnType<GetStateFnType>
type DispatchType = typeof store.dispatch

// 这里自定义selector 并暴露出去
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
// 为了统一还自定义了Dispatch和shallowEqual
export const useAppDispatch: () => DispatchType = useDispatch
// shallowEqual的作用是比较前后数据 如果一样则不更新 优化了性能
export const shallowEqualApp = shallowEqual

export default store
